<template>
  <div class="admin-user-tree" v-cloak>
    <x-border title="推荐关系反查" desc="往上查询会员的推荐关系" icon="icon-7962-shouyouli" type="light">
      <div slot="headerRight" class="headerRight">

      </div>
      <div class="admin-user-tree_container">
        <div class="search-box">
          <el-input placeholder="请输入会员用户名、手机号、姓名、邮箱" v-model="keyword" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </div>
        <el-alert title="输入会员反查其推荐关系" type="success" :closable="false" description="查询会员的反推荐关系，在上面搜索框中输入您要查询会员的用户名或手机号" show-icon>
        </el-alert>
        <div class="content" v-if="async">
          <el-timeline style="margin-left:30px" v-if="viewModel">
            <el-timeline-item v-for="(item, index) in viewModel.users" :key="index" color="#0bbd87" :timestamp="item.createTime">
              {{item.userName}}
            </el-timeline-item>
          </el-timeline>
        </div>
        <div v-else v-loading="loading"></div>
      </div>
    </x-border>
  </div>
</template>

<script>

  export default {
    data () {
      return {
        async: false,
        loading: false,
        viewModel: null,
        keyword: ''
      }
    },
    props: {
      widget: {}
    },
    mounted () {

    },
    methods: {
      async search () {
        this.loading = true
        this.async = false
        this.viewModel = null
        var para = {
          keyword: this.keyword
        }
        var res = await this.$ala.widget('UserRelationUp', para)
        if (res) {
          this.viewModel = res
        } else {
          this.keyword = ''
        }
        this.async = true
        this.loading = false
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  [v-cloak] {
    display: none !important;
  }

  .admin-user-tree {
    display: flex;
    .search-box {
      width: 40%;
      margin-bottom: 20px;
      margin-left: 30%;
      flex: 1;
      align-items: center;
      display: flex;
      justify-content: center;
    }
    .admin-user-tree_container {
      padding: 0px 20px;
      padding-bottom: 20px;
    }
    .el-loading-mask {
      height: 600px;
    }
  }
</style>


